<!--
 * @Author: 杨超
 * @Date: 2021-11-24 20:33:45
 * @LastEditTime: 2021-12-01 17:12:41
 * @LastEditors: 杨超
 * @Description:
-->
<template>
    <!-- 日期选择框 -->
    <div :style="item.style || {}" :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`" class="form-item-box">
        <el-date-picker
            v-if="!getTextModel"
            v-model="val"
            class="form-date-item"
            :type="item.defaultType || 'date'"
            style="width: 100%"
            :disabled="getDisabled"
            :placeholder="getPlaceholder(item)"
            :picker-options="item.pickerOptions ? handlerDate(item.pickerOptions) : () => false"
            :value-format="item['value-format'] || 'yyyy-MM-dd'"
            :clearable="true"
            v-bind="bindOptions"
            @blur="(e) => onBlur(item, e)"
            @focus="(e) => onFocus(item, e)"
        />
        <div v-else :style="item.textStyle || {}" class="form-input-text">
            {{ val || '-' }}
        </div>
    </div>
</template>

<script>
import FormMixin from './mixin'

export default {
    name: 'FormDate',
    mixins: [FormMixin],
    methods: {
        handlerDate(item) {
            const { before, after, maxOffset, minOffset } = item
            return {
                disabledDate: (time) => {
                    if (before) {
                        // 限制当前时间之前
                        return time.getTime() < Date.now() - 1000 * 60 * 60 * 24
                    } else if (after) {
                        // 限制当前时间之后的时间
                        return time.getTime() > Date.now()
                    } else if (maxOffset && !minOffset) {
                        return time.getTime() < maxOffset
                    } else if (minOffset && !maxOffset) {
                        return time.getTime() > minOffset - 1000 * 60 * 60 * 24
                    } else if (maxOffset && minOffset) {
                        return time.getTime() > minOffset - 1000 * 60 * 60 * 24 || time.getTime() < maxOffset
                    }
                }
            }
        }
    }
}
</script>

<style scoped lang="scss">
</style>
